<template>
    <div class="wrapper">
        <el-dialog title="切换公司" custom-class="role-change-dialog" :visible.sync="dialogVisible" v-if="dialogVisible"
            width="500px" :before-close="handleClose">
            <div class="content">
                <el-radio-group v-model="userId" size="small">
                    <el-radio v-for="(item, index) in roleData" class="role-radio" style="margin-top:10px;margin-left:10px" :key="index" :label="item.user_id" border>{{
                        item.saas_company_name
                    }}</el-radio>
                </el-radio-group>
            </div>
            <div style="margin-top: 40px; text-align: right;">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    INfOuserList, amendAvatar, amendUserInfo, AllInfo, ModifyPassword
} from "@/api/user";
export default {
    name: 'roleChange',
    components: {},
    props: ['dialogVisible', 'user'],
    data() {
        return {
            ruleForm: {},
            rules: {},
            roleData: [],
            userId: '',
        };
    },
    watch: {
        dialogVisible(newValue, oldValue) {
            if (newValue) {
                AllInfo({ mobile: this.user.mobile }).then(res => {
                    const data = res.data || {};
                    this.roleData = data.all_user_info;
                    localStorage.setItem(
                        "allUserInfo",
                        JSON.stringify(data.all_user_info)
                    );
                });
            }
        }
    },
    mounted() {

    },
    methods: {
        handleClose() {
            this.$emit('close');
        },
        handleOk() {
            this.$store.dispatch('setUserInfo', { id: this.userId });

        }
    },
};
</script>
<style lang="scss" scoped>
.wrapper {}

/deep/.role-change-dialog {
    margin-top: 25vh !important;
}

/deep/.role-change-dialog .content {
    min-height: 100px;
}
/deep/.role-radio{
    width: 300px;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0;
    padding-left: 10px;
}
</style>